//@flow
import React from 'react'
import {
  View,
  TextInput,
  StyleSheet,
} from 'react-native'
import { ScrollContainer } from '../../../util/component/container'
import { Actions } from 'react-native-router-flux'
import Button from 'react-native-button'
import {
  windowWidth,
  windowHeight,
} from '../../../util/dimension'
import {
  checkLoginInputs,
} from '../../action/account'
import { graphql } from 'react-apollo'
import gql from 'graphql-tag'

const contentWidth = windowWidth()* 0.9

const styles = StyleSheet.create({
  container:{
    marginTop:0,
  },
  content:{
    paddingTop: windowHeight()/4,
    alignItems:'center',
  },
  loginInput:{
    backgroundColor:'white',
    paddingHorizontal: 10,
    width: contentWidth,
    borderRadius:5,
    height:40,
  },
  buts:{
    flexDirection:'row',
    marginTop:10,
    width: contentWidth,
    justifyContent:'space-between',
  },
  loginBut:{
    backgroundColor: 'blue',
    width:contentWidth,
    marginTop:30,
    paddingVertical:10,
    borderRadius:5,
  },
  registerBut:{
    fontSize:16,
  },
  forgetBut:{
    fontSize:16,
  },
})

const Login = React.createClass({
  getInitialState(){
    return {
      account:'',
      pwd:'',
    };
  },
  render(){
    const {account, pwd} = this.state
    return (
        <ScrollContainer style={styles.container}>
          <View
            style={styles.content}
            >
            <View>
              <TextInput
                keyboardType="phone-pad"
                selectTextOnFocus
                value={account}
                style={styles.loginInput}
                placeholder="手机号:"
                maxLength={16}
                />
            </View>
            <View>
              <TextInput
                secureTextEntry
                placeholder="密 码:"
                maxLength={20}
                value={pwd}
                style={[styles.loginInput, { marginTop:20,}]}
                />
            </View>
            <View
              style={styles.buts}
              >
              <Button
                style={styles.registerBut}
                onPress={Actions.register}
                >注册</Button>
              <Button
                style={styles.forgetBut}
                >忘记密码？</Button>
            </View>
            <View>
              <Button
                containerStyle={styles.loginBut}
                style={{color:'white',}}
                onPress={() => this.props.mutate({variables:{acc:'123',pwd:'321'}})}
                >登录</Button>
            </View>
          </View>
        </ScrollContainer>
      )
  },
})
export default graphql(gql`
  mutation login($acc:String!,$pwd:String!){
    getToken(acc:$acc,pwd:$pwd)
  }`
)(Login)
